﻿<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="~/css/base.css" />
    <link rel="stylesheet" href="~/css/login.css" />
    <link rel="stylesheet" href="~/layui/css/layui.css" />
    <script type="text/javascript" src="~/js/jquery.js"></script>
    <script type="text/javascript" src="~/js/common.js"></script>
    <script src="~/layui/layui.all.js"></script>
    <script src="~/js/layer_v2.1/layer/layer.js"></script>
    <script type="text/javascript" src="~/layui/layui.js"></script>
    <script src="~/Scripts/static/common/layui/layui.js"></script>
    <script src="~/Scripts/static/admin/js/canvas.js"></script>
    <script src="~/js/zTreeStyle/Login.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <style>
        /*body， #container调视频覆盖背景图的边距*/
        body {
            padding: 0px;
        }

        #container {
            padding: 0px;
        }

        .login1 .login-input p.yzm input {
            background-image: url('../../images/QQ图片20191128090723.png');
            width: 90px;
            height: 40px;
            border-radius: 6px;
        }

        .login1 .login-input p.yzm canvas {
            position: relative;
            top: 10px
        }
        /*#bd：调视频的宽度，#bds条视频的定位，.login1调登录块*/
        #bd {
            width: 100%;
            height: 100%
        }

        #bds {
            padding: 0;
            position: relative;
        }

        .login1 {
            position: absolute;
            top: 120px;
            left: 350px
        }
        /*去除播放链条*/
        video::-webkit-media-controls {
            display: none !important;
        }

        .login-top img {
            width: 600px;
            height: 180px;
        }

        #remembers {
            position: absolute;
            left: 240px;
            top: 353px;
        }

        .remembers label {
            position: absolute;
            left: 255px;
            top: 350px;
        }

        .login-btn {
            position: relative;
            top: 15px;
        }
    </style>
    <title>移动办公自动化系统</title>
</head>
<body>
    <div id="container">
        <div id="bds">
            <video autoplay="autoplay" controls="controls" loop="loop" muted="muted" id="bd" -webkit-media-controls">
                <source src="~/images/157112811924c186dace444123.mp4_last.mp4" type="audio/mp4">
                <source />
            </video>
            <div class="login1">
                <div class="login-top"><img src="~/images/QQ图片20191210171535.png" /></div>
                <div class="login-input">
                    <p class="user ue-clear">
                        <label>用户名</label>
                        <input type="text" id="username" />
                    </p>
                    <p class="password ue-clear">
                        <label>密&nbsp;&nbsp;&nbsp;码</label>
                        <input type="password" id="pwd" />
                    </p>
                    <p class="yzm ue-clear">
                        <label>验证码</label>
                        <input type="text" id="code" />
                        <canvas id="canvas" width="100" height="30"></canvas>

                    </p>
                </div>
                <div class="remembers ue-clear">
                    <input type="checkbox" id="remembers" />
                    <label for="remember">记住密码</label>
                </div>
                <div class="login-btn ue-clear">
                    <input name="" type="submit" class="btn btn-success radius size-L" id="login_btn" value="&nbsp;登&nbsp;&nbsp;&nbsp;&nbsp;录&nbsp;">
                </div>
            </div>
        </div>
    </div>
</body>


</html>